<template>
  <div id="right" class="right" :style="{ right: isShow ? '0px' : '-390px' }">
    <div class="right-box">
      <div class="big-tit">
        <!-- <img src="@/assets/tit-right-bg.png" /> -->
        <div style="top: 4px; left: 20px; font-weight: bold">重点船舶管理</div>
      </div>
      <!-- <div> <button @click="toLive"></button></div> -->
      <div class="big-content">
        <div style="width: 100%; height: 27%; margin-bottom: 40px">
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <!-- showVerify -->
            <div class="tit-name" v-if="showCheck">黑灰审核</div>
            <div class="tit-name" v-if="showVerify">黑灰审批</div>

            <div
              v-if="showVerify"
              style="
                width: 50px;
                font-size: 12px;
                line-height: 30px;
                cursor: pointer;
              "
              @click="hanleVerifyMore"
            >
              <i class="el-icon-search"></i> 更多
            </div>
            <div
              v-if="showCheck"
              style="
                width: 50px;
                font-size: 12px;
                line-height: 30px;
                cursor: pointer;
              "
              @click="hanleCheckMore"
            >
              <i class="el-icon-search"></i> 更多
            </div>
          </div>
          <div
            style="width: 100%; height: 100%"
            class="table"
            v-if="showVerify"
          >
            <el-table
              :header-cell-style="{
                textAlign: 'center',
                color: '#fff',
                background: '#132054',
              }"
              :cell-style="{ textAlign: 'center' }"
              :data="verifyTable"
              style="width: 100%; margin-top: 3px"
              height="100%"
            >
              <el-table-column prop="shipName" label="船舶名称" width="150">
              </el-table-column>
              <el-table-column prop="shipId" label="船舶识别号" width="150">
              </el-table-column>
              <el-table-column prop="keyshipType" label="类型" width="120">
              </el-table-column>
              <el-table-column prop="enterPeople" label="录入人员" width="120">
              </el-table-column>
              <el-table-column
                prop="enterDeptName"
                label="录入人员机构"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="isApprovedVerify"
                label="是否审批"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="isPassedVerify"
                label="是否审批通过"
                width="210"
              >
              </el-table-column>
              <el-table-column prop="zip" fixed="right" label="操作" width="70">
                <template slot-scope="scope">
                  <!-- <el-tooltip
                  v-if="!verifyChildren"
                    class="item"
                    effect="dark"
                    content="暂无权限"
                    placement="bottom"
                  >
                  <el-button
                    :disabled="!verifyChildren"
                    style="cursor: pointer !important"
                    @click="handleVerify(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审批</el-button
                  >
                  </el-tooltip> -->
                  <el-button
                    style="cursor: pointer !important"
                    @click="handleVerify(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审批</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 100%; height: 100%" class="table" v-if="showCheck">
            <el-table
              :header-cell-style="{
                textAlign: 'center',
                color: '#fff',
                background: '#132054',
              }"
              :cell-style="{ textAlign: 'center' }"
              :data="checkTable"
              style="width: 100%; margin-top: 3px"
              height="100%"
            >
              <el-table-column prop="shipName" label="船舶名称" width="150">
              </el-table-column>
              <el-table-column prop="shipId" label="船舶识别号" width="150">
              </el-table-column>
              <el-table-column prop="keyshipType" label="类型" width="120">
              </el-table-column>
              <el-table-column prop="enterPeople" label="录入人员" width="120">
              </el-table-column>
              <el-table-column
                prop="enterDeptName"
                label="录入人员机构"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="isPassed" label="是否审核通过" width="150">
              </el-table-column>
              <el-table-column prop="listingType" label="列入类型" width="210">
              </el-table-column>
              <el-table-column prop="zip" fixed="right" label="操作" width="70">
                <template slot-scope="scope">
                  <el-button
                    style="cursor: pointer !important"
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审核</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div
            v-else
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 35%;
              height: 35%;
              margin: 30px auto;
            "
          >
            <img
              src="@/assets/kong.png"
              alt=""
              style="width: 80px; height: 100px"
            />
            <div style="margin-top: 10px">暂无数据</div>
          </div> -->
        </div>
        <div
          style="
            width: 100%;
            height: 27%;
            margin-bottom: 40px;
            margin-top: 35px;
          "
        >
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">线上检查</div>
            <div
              style="
                width: 50px;
                font-size: 12px;
                line-height: 30px;
                cursor: pointer;
              "
              @click="hanleMore"
            >
              <i class="el-icon-search"></i> 更多
            </div>
          </div>
          <div style="width: 100%; height: 100%" class="table">
            <el-table
              :data="lineTable"
              :header-cell-style="{
                textAlign: 'center',
                color: '#fff',
                background: '#132054',
              }"
              :cell-style="{ textAlign: 'center' }"
              style="width: 100%; margin-top: 3px"
              height="100%"
            >
              <el-table-column prop="shipName" label="船舶名称" width="130">
              </el-table-column>
              <el-table-column prop="shipId" label="船舶识别号" width="150">
              </el-table-column>
              <el-table-column prop="keyshipType" label="类型" width="100">
              </el-table-column>
              <el-table-column prop="enterPeople" label="录入人员" width="180">
              </el-table-column>
              <el-table-column
                prop="enterDeptName"
                label="录入人员机构"
                width="150"
              >
              </el-table-column>

              <el-table-column
                prop="examinePeople"
                label="审核人员"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="isApproved" label="是否审核" width="150">
              </el-table-column>

              <el-table-column prop="isPassed" label="是否审核通过" width="180">
              </el-table-column>
              <el-table-column
                prop="isApprovedVerify"
                label="是否审批"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="isPassedVerify"
                label="是否审批通过"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="zip"
                fixed="right"
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button
                    style="cursor: pointer !important"
                    @click="handleLine(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >线上检查</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div
          style="width: 100%; height: calc(46% - 80px); margin-bottom: 40px"
        >
          <div class="tit" style="margin-left: 5px">
            <div
              style="width: 3.5px; color: #226dc4; background-color: #226dc4"
            >
              &nbsp;
            </div>
            <div
              class="tit-name"
              style="
                height: 30px;
                display: flex;
                align-items: center;
                line-height: 20px;
              "
            >
              <div style="font-size: 16px;font-weight: bold;" class="title">
                <!-- <button
                  class="btnStyle"
                  style="font-size: 14px; margin-right: 6px; padding: 3px"
                  @click="getCount()"
                  :class="{
                    btnActive: tabCCTV == 'TabCount',
                  }"
                >
                  告警总数
                </button>
                <button
                  style="font-size: 14px; margin-right: 6px; padding: 3px"
                  class="btnStyle"
                  @click="getClass"
                  :class="{ btnActive: tabCCTV == 'TabClass' }"
                >
                  告警分类
                </button> -->
                <!-- <button
                  style="font-size: 14px; margin-right: 6px; padding: 3px"
                  class="btnStyle"
                  @click="tabCCTV = 'newEnergyAlert'"
                  :class="{ btnActive: tabCCTV == 'newEnergyAlert' }"
                >
                  新能源告警
                </button> -->
                新能源告警
              </div>
            </div>
          </div>
          <div
            class="big-content"
            style="height: 80%"
            v-show="tabCCTV == 'TabCount'"
          >
            <div style="width: 100%; height: 100%; margin-bottom: 11px">
              <!-- <div class="tit">
              <div
                style="width: 3px; color: #226dc4; background-color: #226dc4"
              >
                &nbsp;
              </div>
              <div class="tit-name">船载智能CCTV告警总数</div>
            </div> -->
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div class="sum_content">
                  <div style="flex: 1; display: flex">
                    <img
                      style="
                        text-align: center;
                        margin-top: 20px;
                        margin-left: 5px;
                      "
                      height="38"
                      width="36"
                      src="@/assets/alarm_sum.png"
                    />
                    <div
                      style="margin-left: 10px; margin-top: 20px; float: left"
                    >
                      <div style="font-size: 15px" ref="alarmSum"></div>
                      <div
                        style="font-size: 15px; color: #e1e1e1; margin-top: 5px"
                      >
                        告警总数
                      </div>
                    </div>
                  </div>
                  <div style="flex: 1">
                    <div style="flex: 1; display: flex">
                      <img
                        style="
                          text-align: center;
                          margin-top: 5px;
                          margin-left: 5px;
                        "
                        height="25"
                        width="25"
                        src="@/assets/alarm_handle.png"
                      />
                      <div style="margin-left: 10px; float: left">
                        <div style="font-size: 15px" ref="handleAlarm"></div>
                        <div
                          style="
                            font-size: 15px;
                            color: #e1e1e1;
                            margin-top: 5px;
                          "
                        >
                          已处置告警
                        </div>
                      </div>
                    </div>
                    <div style="flex: 1; display: flex; margin-top: 10px">
                      <img
                        style="
                          text-align: center;
                          margin-top: 5px;
                          margin-left: 5px;
                        "
                        height="25"
                        width="25"
                        src="@/assets/alarm_unhandle.png"
                      />
                      <div style="margin-left: 10px; float: left">
                        <div style="font-size: 15px" ref="unhandleAlarm"></div>
                        <div
                          style="
                            font-size: 15px;
                            color: #e1e1e1;
                            margin-top: 5px;
                          "
                        >
                          未处置告警
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              margin-bottom: 5px;
              padding: 5px;
              width: 100%;
              min-height: 30%;
            "
            v-show="tabCCTV == 'TabClass'"
          >
            <div style="width: 95%; height: 99%; margin-bottom: 11px">
              <div
                style="
                  width: 100%;
                  height: 88%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                "
              >
                <div style="width: 350px; height: 200px" ref="alarmClass"></div>
              </div>
            </div>
          </div>
          <div
            style="height: 100%"
            v-show="tabCCTV == 'newEnergyAlert'"
          >
            <toggleComponents
              :components="rightBottomComponents"
            ></toggleComponents>
            <div
              v-for="(item, index) in rightBottomComponents"
              :key="index"
              v-show="item.isActive"
              :class="['component-container', 'component-' + item.component]"
            >
              <component :is="item.component" v-if="item.isActive"></component>
            </div>
          </div>
        </div>
        <!-- <div
          style="width: 100%; height: 27%; margin-bottom: 0px; margin-top: 35px"
        >
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">C级船</div>
            <div
              style="
                width: 50px;
                font-size: 12px;
                line-height: 30px;
                cursor: pointer;
              "
              @click="hanleTableCMore"
            >
              <i class="el-icon-search"></i> 更多
            </div>
          </div>
          <div style="width: 100%; height: 100%" class="table">
            <el-table
              :data="tableData"
              :header-cell-style="{
                textAlign: 'center',
                color: '#fff',
                background: '#132054',
              }"
              :cell-style="{ textAlign: 'center' }"
              style="width: 100%; margin-top: 3px"
              height="100%"
            >
              <el-table-column prop="shipName" label="船舶名称" width="130">
              </el-table-column>
              <el-table-column prop="shipId" label="船舶识别号" width="180">
              </el-table-column>
              <el-table-column prop="shipMmsi" label="船舶MMSI" width="180">
              </el-table-column>
              <el-table-column prop="shipOwner" label="船舶所属公司" width="210">
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                width="100"
              >
              </el-table-column>

              <el-table-column
                prop="stringencyPeriodStartDate"
                label="严管期开始时间"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="stringencyPeriodEndDate" label="严管期结束时间" width="150">
              </el-table-column>

              <el-table-column prop="source" label="来源" width="150">
              </el-table-column>
              <el-table-column prop="isPassed" label="列入原因" width="180">
              </el-table-column>
              <el-table-column prop="zip" fixed="right" label="操作" width="70">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    style="cursor: pointer !important"
                    @click="workPIC"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审批</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div> -->
      </div>
    </div>
    <div id="showButton" class="showButton" @click="toggleLeftPanel">
      {{ isShow ? "关闭" : "展开" }}
    </div>
    <div v-if="VisiblePI">
      <el-dialog
        :title="`审核[${VisiblePINme}]`"
        :visible.sync="VisiblePI"
        :modal-append-to-body="false"
        width="500px"
      >
        <el-form :model="formPI">
          <el-form-item label="是否审核通过:" label-width="120px">
            <el-radio-group v-model="radioPI">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeVisiblePI">取 消</el-button>
          <el-button type="primary" @click="VisiblePIComit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleVerify">
      <el-dialog
        :title="`审批[${VerifyNmae}]`"
        :visible.sync="VisibleVerify"
        :modal-append-to-body="false"
        width="500px"
      >
        <el-form :model="formPI">
          <el-form-item label="是否审批通过:" label-width="120px">
            <el-radio-group v-model="radioVerify">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeVisibleVerify">取 消</el-button>
          <el-button type="primary" @click="VisibleVerifyComit()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleLine">
      <el-dialog
        class="line"
        :title="`线上检查【${formLine.shipName}】`"
        :visible.sync="VisibleLine"
        :modal-append-to-body="false"
        @close="closeLine"
      >
        <el-form :model="formLine">
          <el-form-item label="船舶名称" label-width="80px">
            <el-input
              v-model="formLine.shipName"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="船舶MMSI" label-width="80px">
            <el-input
              v-model="formLine.mmsi"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="检查时间" label-width="80px">
            <el-input
              v-model="formLine.checkTime"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="检查人员" label-width="80px">
            <el-input
              v-model="formLine.checkPeople"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <el-form-item label="检查机构" label-width="80px">
            <el-input
              v-model="formLine.checkMechanismCode"
              autocomplete="off"
              readonly
            ></el-input>
          </el-form-item>
          <div>
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <!-- 一致性 Consistency<i class="header-icon el-icon-info"></i> -->
                  零排放的污染物交付
                </template>
                <div>
                  <el-table
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    class="check"
                    :data="pollutionTable"
                    style="width: 100%"
                    height="250"
                  >
                    <el-table-column
                      type="index"
                      fixed="left"
                      label="序号"
                      width="70"
                    ></el-table-column>
                    <el-table-column
                      prop="recipientShipName"
                      label="接收船舶"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="recipient"
                      label="接收船舶识别号"
                      width="180"
                    >
                    </el-table-column>
                    <!-- <el-table-column
                      prop="transshipmentShipName"
                      label="交付船舶"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="transshipment"
                      label="交付船舶识别号"
                      width="180"
                    >
                    </el-table-column> -->
                    <el-table-column
                      prop="operator"
                      label="作业人员"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="pollutantType"
                      label="污染物类型"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="deliverTime"
                      label="交付时间"
                      width="180"
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="船E行的污染物交付">
                <div>
                  <el-table
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    class="check"
                    :data="recevieTable"
                    style="width: 100%"
                    height="250"
                  >
                    <el-table-column
                      type="index"
                      fixed="left"
                      label="序号"
                      width="70"
                    ></el-table-column>
                    <!-- <el-table-column
                      prop="shipName"
                      label="船舶名称"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="shipId"
                      label="船舶识别号"
                      width="150"
                    >
                    </el-table-column> -->
                    <el-table-column
                      prop="departName"
                      label="管辖机构"
                      width="180"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="number"
                      label="污染物数量"
                      width="180"
                      show-overflow-tooltip
                    >
                    </el-table-column>

                    <el-table-column
                      prop="sewageTypeName"
                      label="污染物类型"
                      width="200"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="workPlace"
                      label="工作地点"
                      width="200"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="workTime"
                      label="工作时间"
                      width="200"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="workUnit"
                      label="工作单位"
                      width="180"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                      prop="state"
                      label="状态"
                      width="180"
                      show-overflow-tooltip
                    >
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <el-form-item label="污染物是否正常" label-width="120px">
            <el-radio-group v-model="radioLine" @input="changeRadioLine">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-show="isPoll">
            <div style="display: flex; margin-bottom: 5px">
              <span style="display: inline-block; width: 21%">整改要求：</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLine.pollutantDeliveryRectification"
              >
              </el-input>
            </div>

            <div style="display: flex">
              <span style="display: inline-block; width: 21%">问题描述：</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLine.pollutantDeliveryProblem"
              >
              </el-input>
            </div>
          </div>
          <el-form-item label="是否需要现场检查" label-width="125px">
            <el-radio-group v-model="radioLineSit" @input="changeSit">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-show="isSit">
            <div style="display: flex; margin-bottom: 5px">
              <span style="display: inline-block; width: 21%">整改要求：</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLine.siteCheckRectification"
              >
              </el-input>
            </div>

            <div style="display: flex">
              <span style="display: inline-block; width: 21%">问题描述：</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLine.siteCheckProblem"
              >
              </el-input>
            </div>
          </div>
          <el-form-item label="备注" label-width="50px">
            <div style="margin-top: 5px; width: 94%; float: right">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formLine.remark"
              >
              </el-input>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeLine">取 消</el-button>
          <el-button type="primary" @click="lineComit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleMore">
      <el-dialog
        title="线上检查"
        class="check"
        :visible.sync="VisibleMore"
        :modal-append-to-body="false"
        width="80%"
      >
        <div style="width: 100%">
          <el-form :model="linequery" class="lineMore">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="船舶名称" label-width="80px">
                  <el-input
                    v-model="linequery.shipName"
                    autocomplete="off"
                    placeholder="输入船舶名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="船舶识别号" label-width="80px">
                  <el-input
                    v-model="linequery.shipId"
                    autocomplete="off"
                    placeholder="输入识别号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="lineMoreCheck()"
                  >查询</el-button
                >

                <el-button
                  @click="lineMoreRest()"
                  style="background-color: rgb(192 208 236); color: white"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table
          ref="multipleTable"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          :data="lineTableList"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column fixed prop="shipName" label="船舶名称" width="130">
          </el-table-column>
          <el-table-column prop="shipId" label="船舶识别号" width="150">
          </el-table-column>
          <el-table-column prop="keyshipType" label="类型" width="100">
          </el-table-column>
          <el-table-column prop="enterPeople" label="录入人员" width="180">
          </el-table-column>
          <el-table-column
            prop="enterDeptName"
            label="录入人员机构"
            width="150"
          >
          </el-table-column>

          <el-table-column prop="examinePeople" label="审核人员" width="180">
          </el-table-column>

          <el-table-column prop="isPassed" label="是否审核通过" width="180">
          </el-table-column>
          <el-table-column
            prop="isPassedVerify"
            label="是否审批通过"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="listingType"
            label="列入原因"
            show-overflow-tooltip
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="information"
            label="备注"
            show-overflow-tooltip
            width="180"
          >
          </el-table-column>
          <el-table-column prop="zip" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleLine(scope.row)"
                type="text"
                size="small"
              >
                <i class="el-icon-edit"></i>线上检查</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @current-change="handleCurrentChangeLine"
            :current-page.sync="linePage.pageNum"
            :page-size="linePage.pageSize"
            layout="total, prev, pager, next"
            :total="lineTotal"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleCheckMore">
      <el-dialog
        title="黑灰审核"
        :visible.sync="VisibleCheckMore"
        :modal-append-to-body="false"
        width="63%"
        class="check"
      >
        <div style="width: 100%">
          <el-form :model="checkMore" class="lineMore">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="船舶名称" label-width="80px">
                  <el-input
                    v-model="checkMore.shipName"
                    autocomplete="off"
                    placeholder="输入船舶名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="船舶识别号" label-width="80px">
                  <el-input
                    v-model="checkMore.shipId"
                    autocomplete="off"
                    placeholder="输入识别号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="checkMoreCheck()"
                  >查询</el-button
                >

                <el-button
                  @click="checkMoreRest()"
                  style="background-color: rgb(192 208 236); color: white"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="checkTableList"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column fixed prop="shipName" label="船舶名称" width="150">
          </el-table-column>
          <el-table-column prop="shipId" label="船舶识别号" width="150">
          </el-table-column>
          <el-table-column prop="keyshipType" label="类型" width="120">
          </el-table-column>
          <el-table-column prop="enterPeople" label="录入人员" width="120">
          </el-table-column>
          <el-table-column
            prop="enterDeptName"
            label="录入人员机构"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="isPassed" label="是否审核通过" width="150">
          </el-table-column>
          <el-table-column
            prop="listingType"
            label="列入类型"
            width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="zip" fixed="right" label="操作" width="70">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >
                <i class="el-icon-edit"></i>审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @current-change="handleCurrentChangeCheck"
            :current-page.sync="checkPage.pageNum"
            :page-size="checkPage.pageSize"
            layout="total, prev, pager, next"
            :total="checkTotal"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleVerifyMore">
      <el-dialog
        class="check"
        title="黑灰审批"
        :visible.sync="VisibleVerifyMore"
        :modal-append-to-body="false"
        width="63%"
      >
        <div style="width: 100%">
          <el-form :model="VerifyMore" class="lineMore">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="船舶名称" label-width="80px">
                  <el-input
                    v-model="VerifyMore.shipName"
                    autocomplete="off"
                    placeholder="输入船舶名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="船舶识别号" label-width="80px">
                  <el-input
                    v-model="VerifyMore.shipId"
                    autocomplete="off"
                    placeholder="输入识别号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="VerifyMoreCheck()"
                  >查询</el-button
                >

                <el-button
                  @click="VerifyMoreRest()"
                  style="background-color: rgb(192 208 236); color: white"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="verifyTableList"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="index" fixed="left" label="序号" width="70">
          </el-table-column>
          <el-table-column fixed prop="shipName" label="船舶名称" width="150">
          </el-table-column>
          <el-table-column prop="shipId" label="船舶识别号" width="150">
          </el-table-column>
          <el-table-column prop="keyshipType" label="类型" width="120">
          </el-table-column>
          <el-table-column prop="enterPeople" label="录入人员" width="120">
          </el-table-column>
          <el-table-column
            prop="enterDeptName"
            label="录入人员机构"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="isPassed" label="是否审核通过" width="150">
          </el-table-column>
          <el-table-column
            prop="listingType"
            label="列入类型"
            width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="zip" fixed="right" label="操作" width="70">
            <template slot-scope="scope">
              <el-button
                style="cursor: pointer !important"
                @click="handleVerify(scope.row)"
                type="text"
                size="small"
              >
                <i class="el-icon-edit" style="cursor: pointer !important"></i
                >审批</el-button
              >
              <!-- <el-tooltip
                  v-if="!verifyChildren"
                    class="item"
                    effect="dark"
                    content="暂无权限"
                    placement="bottom"
                  >
                  <el-button
                    :disabled="!verifyChildren"
                    style="cursor: pointer !important"
                    @click="handleVerify(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审批</el-button
                  >
                  </el-tooltip>
                  <el-button
                  v-if="verifyChildren"
                    style="cursor: pointer !important"
                    @click="handleVerify(scope.row)"
                    type="text"
                    size="small"
                  >
                    <i
                      class="el-icon-edit"
                      style="cursor: pointer !important"
                    ></i
                    >审批</el-button
                  > -->
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @current-change="handleCurrentChangeVerify"
            :current-page.sync="VerifyPage.pageNum"
            :page-size="VerifyPage.pageSize"
            layout="total, prev, pager, next"
            :total="verifyTotal"
          >
          </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisibleCMore">
      <el-dialog
        class="check"
        title="C级船"
        :visible.sync="VisibleCMore"
        :modal-append-to-body="false"
        width="80%"
      >
        <div style="width: 100%">
          <el-form class="lineMore">
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="船舶名称" label-width="80px">
                  <el-input
                    autocomplete="off"
                    placeholder="输入船舶名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="船舶识别号" label-width="80px">
                  <el-input
                    autocomplete="off"
                    placeholder="输入识别号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button disabled type="primary">查询</el-button>

                <el-button
                  disabled
                  style="background-color: rgb(192 208 236); color: white"
                  >重置</el-button
                >
                <el-button
                  @click="workPIC"
                  style="background-color: rgb(53, 169, 83); color: white"
                  >审批</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="shipName" label="船舶名称" width="130">
          </el-table-column>
          <el-table-column prop="shipId" label="船舶识别号" width="180">
          </el-table-column>
          <el-table-column prop="shipMmsi" label="船舶MMSI" width="180">
          </el-table-column>
          <el-table-column prop="shipOwner" label="船舶所属公司" width="210">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="100">
          </el-table-column>

          <el-table-column
            prop="stringencyPeriodStartDate"
            label="严管期开始时间"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="stringencyPeriodEndDate"
            label="严管期结束时间"
            width="150"
          >
          </el-table-column>

          <el-table-column prop="source" label="来源" width="150">
          </el-table-column>
          <el-table-column prop="isPassed" label="列入原因" width="180">
          </el-table-column>

          <el-table-column prop="zip" fixed="right" label="操作" width="70">
            <template slot-scope="scope">
              <el-button @click="VisiblePIC = true" type="text" size="small">
                <i class="el-icon-edit"></i>审批</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination layout="total, prev, pager, next" :total="5">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div v-if="VisiblePIC">
      <el-dialog
        title="C级船审批"
        :visible.sync="VisiblePIC"
        :modal-append-to-body="false"
        width="500px"
        @close="closePIC"
      >
        <el-form>
          <el-form-item label="是否审批通过:" label-width="120px">
            <el-radio-group v-model="radioPI">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="closeVisiblePI">取 消</el-button>
          <el-button type="primary" @click="VisiblePIComit()">确 定</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getAudit,
  getLine,
  addLine,
  getPoll,
  getApproval,
  getRecevie,
  getInarea,
  getRoval,
} from "../api/right.js";
import { getAlarm, getType } from "../api/alarm";
import tool from "@/utils/tool";
import moment from "moment";
import alertInformation from "@/components/newEnergyShip/alertInformation.vue";
import alertTable from "@/components/newEnergyShip/alertTable.vue";
import alertRecord from "@/components/newEnergyShip/alertRecord.vue";
import alertStatistics from "@/components/newEnergyShip/alertStatistics.vue";
import toggleComponents from "@/components/newEnergyShip/toggleComponents.vue";
export default {
  components: {
    alertInformation,
    alertTable,
    alertRecord,
    alertStatistics,
    toggleComponents,
  },
  name: "right",
  data() {
    return {
      tabCCTV: "newEnergyAlert",
      VisiblePINme: null,
      VerifyNmae: null,
      VerifyId: null,
      tableCMore: {},
      VisiblePIC: false,
      tableCMore: [],
      VisibleCMore: false,
      recevieTable: [],
      showCheck: false,
      showVerify: false,
      deptName: "",
      pollutionTable: [], //污染物交付五条数据
      checkMore: {},
      VerifyMore: {},
      linequery: {},
      VisibleVerifyMore: false,
      verifyTableList: [], //审批表格
      verifyTable: [],
      VisibleVerify: false,
      VisibleCheckMore: false,
      radioVerify: null,
      verifyTotal: 0,
      VerifyPage: {
        pageSize: 5,
        pageNum: 1,
      },
      VisibleMore: false,
      isSit: false,
      isPoll: false,
      formLine: {
        shipId: "",
        shipName: "",
        mmsi: "",
        checkTime: "",
        checkPeople: "",
        checkMechanismCode: "",
        pollutantDelivery: null,
        pollutantDeliveryProblem: null, //污染物-描述
        pollutantDeliveryRectification: null, //污染物-要求
        siteCheck: null,
        siteCheckProblem: null, //线上检查-描述
        siteCheckRectification: null, //线上检查-要求
        remarks: null,
      },
      radioLine: null,
      radioLineSit: null,
      VisibleLine: false,
      isShow: true,
      VisiblePI: false,
      formPI: {}, //审批表
      radioPI: null, //审批按钮
      tableData: [
        {
          shipName: "苏徐州油18",
          shipId: "CN20116341903",
          shipMmsi: "413831248",
          shipOwner: "沛县第三航运公司",
          type: "C级",
          stringencyPeriodStartDate: "2024-07-01",
          stringencyPeriodEndDate: "2024-07-31",
          source: "江苏海事局",
          isPassed: "测试",
          zip: 200333,
        },
        {
          shipName: "石宝998",
          shipId: "CN20099216500",
          shipMmsi: "413801304",
          shipOwner: "重庆市忠县石宝航运有限公司",
          type: "C级",
          stringencyPeriodStartDate: "2024-07-01",
          stringencyPeriodEndDate: "2024-07-31",
          source: "长江海事局",
          isPassed: "测试",
          zip: 200333,
        },
        {
          shipName: "苏徐油918",
          shipId: "CN20184315773",
          shipMmsi: "413837721",
          shipOwner: "沛县第三航运公司",
          type: "C级",
          stringencyPeriodStartDate: "2024-07-01",
          stringencyPeriodEndDate: "2024-07-31",
          source: "长江海事局",
          isPassed: "测试",
          zip: 200333,
        },
        {
          shipName: "皖池州化218",
          shipId: "CN20055474558",
          shipMmsi: "413950136",
          shipOwner: "池州市流坡航运有限公司",
          type: "C级",
          stringencyPeriodStartDate: "2024-07-01",
          stringencyPeriodEndDate: "2024-07-31",
          source: "江苏海事局",
          isPassed: "测试",
          zip: 200333,
        },
        {
          shipName: "顺海油566",
          shipId: "CN20067016353",
          shipMmsi: "413819219",
          shipOwner: "南京金航船务有限公司",
          type: "C级",
          stringencyPeriodStartDate: "2024-07-01",
          stringencyPeriodEndDate: "2024-07-31",
          source: "江苏海事局",
          isPassed: "测试",
          zip: 200333,
        },
      ],
      checkTable: [], //审核表
      checkPage: {
        pageSize: 5,
        pageNum: 1,
      },
      checkTableList: [],
      checkTotal: 0,
      lineTable: [], //线上检查
      linePage: {
        pageSize: 5,
        pageNum: 1,
      },
      lineTotal: 0,
      lineTableList: [],
      serviceOrg: [],
      orgMap: null,
      verifyChildren: false,
      depCode: null,
      VisiblePIId: null,
      inter: null,
      selectHas: null,
      // 左下侧组件
      rightBottomComponents: [
        { isActive: true, component: "alertInformation" },
        { isActive: true, component: "alertTable" },
        { isActive: false, component: "alertRecord" },
        { isActive: false, component: "alertStatistics" },
      ],
    };
  },
  computed: {},
  destroyed() {
    clearInterval(this.inter);
    this.inter = null;
  },
  created() {},
  mounted() {
    // localStorage.setItem(
    //   "USER_INFO",
    //   JSON.stringify({ onlineDepOrg: "10011002 " ,code:'100110021008'})
    // );
    // localStorage.setItem('ORGCODE','10011002')
    // console.log('jinru ')
    // this.getCount();
    // this.tabCCTV = "TabCount";
    this.selectHas = tool.data.get("ORGCODE");
    const orgCode = tool.data.get("USER_INFO")?.onlineDepOrg;
    this.depCode = tool.data.get("USER_INFO")?.code;
    this.inter = setInterval(() => {
      // console.log('定时器')

      if (this.selectHas != tool.data.get("ORGCODE")) {
        this.selectHas = tool.data.get("ORGCODE");
        this.tabCCTV = "TabCount";
        if (this.selectHas == "1001") {
          this.showVerify = true;
          this.showCheck = false;
        } else {
          this.showCheck = true;
          this.showVerify = false;
          this.getCheck();
        }
      }
    }, 150);
    if (orgCode == "1001") {
      this.showVerify = true;
    } else {
      this.showCheck = true;
    }
    if (this.depCode == "100110071017") {
      this.showVerify = true;
      this.verifyChildren = true;
    }
    this.orgMap = new Map([
      ["100110081006", "010202120209010207"],
      ["100110091003", "010202120207010207"],
      ["100110041028", "010202120210010207"],
      ["100110021008", "010202120201010210"],
      ["100110111015", "010202120205010207"],
      ["100110131004", "010202120211010207"],
      ["100110121024", "010202120206010207"],
      ["100110051008", "010202120204010207"],
      ["100110141006", "010202120212010208"],
      ["100110171015", "010202120208010208"],
      ["100110071017", "01020212010210"],
      ["100110191004", "010202120202010204"],
      ["100110201003", "010202120203010204"],
    ]);

    // this.verifyChildren=depCode=='100110071017'?true:false
    // this.showVerify=depCode=='1001'?true:
    // this.deptName = tool.data.get("USER_INFO")?.depName;
    // console.log(222, this.deptName?.includes("长江海事局"));
    // if (this.deptName?.includes("长江海事局")||this.deptName?.includes("长江管理局")) {
    //   this.showVerify = true;
    // } else if (this.deptName?.includes("危管防污处")) {
    //   this.showCheck = true;
    // }
    this.getCheck();
    this.getLine();
    this.getVerify();
    if (window.microApp) {
      microApp.getGlobalData("PUBLIC_METHODS").changeWidth(true, "right", 390);
    }
  },
  methods: {
    async getCount() {
      this.tabCCTV = "TabCount";
      let res = await getAlarm();
      this.$refs.alarmSum.innerHTML = res.totalAlarmCount;
      this.$refs.handleAlarm.innerHTML = res.handledAlarmCount;
      this.$refs.unhandleAlarm.innerHTML = res.unhandledAlarmCount;

      // console.log(this.tabCCTV);
    },
    async getClass() {
      this.tabCCTV = "TabClass";
      let res = await getType();
      this.drawAlarmClass(res);
      // console.log(res)
    },
    // 告警总类
    async drawAlarmClass(res) {
      this.alarmTypeChart = this.$echarts.init(this.$refs.alarmClass);

      // 告警总数
      // let res=await getType()
      // console.log(res,'告警总类')
      const option = {
        title: {
          text: "",
          subtext: "",
          x: "74%",
          y: "48%",
          subtextStyle: {
            fontSize: 16,
            lineHeight: 15,
            fontWeight: 600,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 图例
          itemHeight: 15,
          data: [
            // "未穿救生衣",
            // "玩手机",
            // "救生衣、工作服未穿",
            // "未戴安全帽、未穿救生衣与工作衣",
          ],
          orient: "vertical",
          x: "left", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle: {
            //图例文字的样式
            color: "#ccc",
            fontSize: 13,
          },
        },
        // graphic: [
        //   {
        //     //环形图中间添加文字
        //     type: "text", //通过不同top值可以设置上下显示
        //     left: "center",
        //     top: "center",
        //     style: {
        //       // text: `总数 ${this.ring6}`,
        //       textAlign: "center",
        //       // fill: "#1E7CE8", //文字的颜色
        //       fontSize: 20,
        //       lineHeight: 20,
        //     },
        //   },
        // ],
        series: [
          {
            radius: ["50%", "80%"],
            center: ["75%", "60%"],
            type: "pie",
            label: {
              show: false,
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
              // normal: {
              //   show: false, // 是否显示标签[ default: false ]
              //   position: "inside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
              //   // formatter: "{b} : {c}", // 标签内容
              //   formatter: function (params) {
              //     // 如果名称为"未戴安全帽、未穿救生衣与工作衣"，则添加换行符
              //     if (params.name === "未戴安全帽、未穿救生衣与工作衣") {
              //       return params.name.replace("、", "、\n") + params.value;
              //     } else {
              //       // 如果名称不是上述情况，则返回原始格式
              //       return params.name + params.value;
              //     }
              //   },
              //   backgroundColor: "black",
              //   padding: [3, 5],
              //   offsetCenter: [0, "30%"],
              //   textStyle: {
              //     //图例文字的样式
              //     color: "#fff",
              //     fontSize: 12,
              //   },
              // },
            },
            data: [
              // {
              //   value: 643,
              //   name: "未穿救生衣",
              // },
              // {
              //   value: 492,
              //   name: "玩手机",
              // },
              // {
              //   value: 1032,
              //   name: "救生衣、工作服未穿",
              // },
              // {
              //   value: 102,
              //   name: "未戴安全帽、未穿救生衣与工作衣",
              // },
            ],
          },
        ],
      };
      let data = res.count.slice(0, 5);
      let type = res.type.slice(0, 5);
      let sum = 0;
      data.forEach((item, index) => {
        let obj = {
          value: item,
          name: type[index],
        };
        sum += item;
        option.series[0].data.push(obj);
        option.legend.data.push(type[index]);
        option.title.subtext = sum;
        console.log(option.series[0].data, sum);
      });
      this.alarmTypeChart.setOption(option);
    },

    workPIC() {
      if (!this.verifyChildren) {
        this.$message({
          message: "暂无权限操作审批",
          type: "warning",
        });
        return;
      }
      this.VisiblePIC = true;
    },
    // toLive(){
    // },
    // C
    hanleTableCMore() {
      this.VisibleCMore = true;
      this.tableCMore = this.tableData;
    },
    handleSelectionChange() {
      // this.VisibleCMore=true
    },
    // 关闭线上检查对话框
    closeLine() {
      this.VisibleLine = false;
      this.restLine();
    },
    closePIC() {
      this.$refs.multipleTable.clearSelection();
    },
    async getVerify() {
      let res = await getApproval({ ...this.VerifyPage, ...this.VerifyMore });
      if (this.VerifyPage.pageSize == 5) {
        this.verifyTable = res.data.list;
      } else {
        this.verifyTotal = res.data.total;
        this.verifyTableList = res.data.list;
      }
    },
    // shenpi
    hanleVerifyMore() {
      this.VisibleVerifyMore = true;
      this.VerifyPage.pageSize = 4;
      this.getVerify();
    },
    // 审批按钮
    handleVerify(row) {
      
      // console.log(this.verifyChildren);
      // if (!this.verifyChildren) {
      //   this.$message({
      //     message: "暂无权限操作审批",
      //     type: "warning",
      //   });
      //   return;
      // }
      // this.VerifyId = row.id;
      // this.VerifyNmae = row.shipName;
     
      if(!this.hasBtnPermission('wfgl:wfglRight:examine')){
        this.$message({
          message: "暂无权限操作审批",
          type: "warning",
        });
        return;
     }
     this.VerifyId = row.id;
     this.VerifyNmae = row.shipName;
      this.VisibleVerify = true;
    },
    VisibleVerifyComit() {
      let obj;
      if (this.radioVerify == 1) {
        obj = {
          userDeptCode: "100110071017",
          approvalStatus: "是",
          id: this.VerifyId,
        };
      } else {
        obj = {
          userDeptCode: "100110071017",
          approvalStatus: "否",
          id: this.VerifyId,
        };
      }
      getRoval(obj).then((res) => {
        this.closeVisibleVerify();
      });
    },
    closeVisibleVerify() {
      this.radioVerify = null;
      this.VisibleVerify = false;
    },
    handleCurrentChangeVerify(val) {
      this.VerifyPage.pageNum = val;
      this.getVerify();
    },
    // 审核列表
    async getCheck() {
      let res = await getAudit({
        ...this.checkPage,
        ...this.checkMore,
        enterDeptCode: this.selectHas,
      });
      if (this.checkPage.pageSize == 5) {
        this.checkTable = res.data.list;
        console.log("审核", this.checkTable);
        // 1. 判断当前用户是否为危防处 orgMap.has(userDeptCode)
        // this.checkTable.forEach(item=>{
        // })
        // 2. 存在继续判断 操作的数据录入部门跟用户是否为同一个局
        // orgMap.get(userDeptCode).subString(0,12) === userDeptCode.subString(0, 12)
        // 真可以操
      } else {
        this.checkTotal = res.data.total;
        this.checkTableList = res.data.list;
      }
    },
    handleCurrentChangeCheck(val) {
      this.checkPage.pageNum = val;
      this.getCheck();
    },
    // line-page
    handleCurrentChangeLine(val) {
      this.linePage.pageNum = val;
      this.getLine();
    },
    // 线上检查列表表格
    async getLine() {
      let res = await getLine({ ...this.linePage, ...this.linequery });
      if (this.linePage.pageSize == 5) {
        this.lineTable = res.data.list;
      } else {
        this.lineTotal = res.data.total;
        this.lineTableList = res.data.list;
      }
    },
    // 线上检查更多表格
    handleLineChange(e) {
      console.log(111, e);
    },
    //
    // 线上检查-查看更多
    hanleMore() {
      this.VisibleMore = true;
      this.linePage.pageSize = 4;
      this.getLine();
    },
    // 线上检查按钮
    changeRadioLine() {
      if (this.radioLine == 2) {
        this.isPoll = true;
        this.formLine.pollutantDelivery = "否";
      } else {
        this.isPoll = false;
        this.formLine.pollutantDelivery = "是";
      }
    },
    changeSit() {
      if (this.radioLineSit == 1) {
        this.isSit = true;
        this.formLine.siteCheck = "是";
      } else {
        this.isSit = false;
        this.formLine.siteCheck = "否";
      }
    },
    restLine() {
      this.formLine = {
        shipId: "",
        shipName: "",
        mmsi: "",
        checkTime: "",
        checkPeople: "",
        checkMechanismCode: "",
        pollutantDelivery: null,
        pollutantDeliveryProblem: null, //污染物-描述
        pollutantDeliveryRectification: null, //污染物-要求
        siteCheck: null,
        siteCheckProblem: null, //线上检查-描述
        siteCheckRectification: null, //线上检查-要求
        remarks: null,
      };
      this.radioLine = null;
      this.radioLineSit = null;
      this.isSit = false;
      this.isPoll = false;
    },
    // 点击线上检查
    async handleLine(row) {
      /*
      if (this.depCode != "100110071017") {
        this.$message({
          message: "暂无权限操作线上检查",
          type: "warning",
        });
        return;
      }
        */
       if(!this.hasBtnPermission('wfgl:wfglRight:online')){
        this.$message({
          message: "暂无权限操作线上检查",
          type: "warning",
        });
        return;
       }
      let res = await getPoll(row.shipId);
      let res1 = await getRecevie(row.shipId);
      // console.log(res1)
      // let res = await getPoll("CN20148306469");
      this.recevieTable = res1;
      this.recevieTable.forEach((item) => {
        if (item.sewageType == "rubbish") {
          item.sewageType = "船舶垃圾";
        }
        if (item.sewageType == "oilsewage") {
          item.sewageType = "含油污水";
        }
        if (item.sewageType == "badoil") {
          item.sewageType = "残油废油";
        }
        if (item.sewageType == "sewage") {
          item.sewageType = "生活污水";
        }
        if (item.sewageType == "toxicliquid") {
          item.sewageType = "洗舱水";
        }
      });
      this.pollutionTable = res.data;
      res.data.forEach((item) => {
        if (item.img) {
          item.imgList = item.img.split(",");
        }
        if (item.discriminateImg) {
          item.disImgList = item.discriminateImg.split(",");
        }
      });

      // this.formLine = row;
      this.formLine.shipName = row.shipName;
      this.formLine.mmsi = row.mmsi;
      this.formLine.checkTime = moment().format("YYYY-MM-DD");
      this.formLine.checkPeople = tool.data.get("USER_INFO")?.name;
      this.formLine.checkMechanismCode = tool.data.get("USER_INFO")?.depName;
      this.VisibleLine = true;

      console.log(
        tool.data.get("USER_INFO")?.name,
        this.formLine.checkPeople,
        22,
        this.formLine
      );
    },
    // 提交线上检查
    lineComit() {
      this.VisibleLine = false;
      addLine(this.formLine).then((res) => {});
      this.restLine();

      // this.formLine = {};
    },
    // 审批更多
    hanleCheckMore() {
      this.VisibleCheckMore = true;
      this.checkPage.pageSize = 4;
      this.getCheck();
      console.log(this.VisibleCheckMore);
    },
    // 点击审核
    handleClick(row) {
      /*
      if (
        this.orgMap.has(this.depCode) &&
        this.orgMap.get(this.depCode).substring(0, 12) ===
          row.enterDeptCode.substring(0, 12)
      ) {
        this.VisiblePI = true;
        // console.log('为放出')
        this.VisiblePIId = row.id;
        this.VisiblePINme = row.shipName;
        // this.VisiblePIComit(row.id)
      } else {
        this.$message({
          message: "暂无权限审核",
          type: "warning",
        });
      }
      */
     if(this.hasBtnPermission('wfgl:wfglRight:audit')){
      this.VisiblePI = true;
        this.VisiblePIId = row.id;
        this.VisiblePINme = row.shipName;
     }else {
        this.$message({
          message: "暂无权限审核",
          type: "warning",
        });
      }
      this.formPI = {};
    },
    VisiblePIComit() {
      if (this.radioPI == 1) {
        let obj = {
          id: this.VisiblePIId,
          userDeptCode: this.orgMap.get(this.depCode),
          auditStatus: "是",
        };
        getInarea(obj).then((res) => {
          this.closeVisiblePI();
        });
      } else {
        let obj = {
          id: this.VisiblePIId,
          userDeptCode: this.orgMap.get(this.depCode),
          auditStatus: "否",
        };
        console.log(obj);
        getInarea(obj).then((res) => {
          this.closeVisiblePI();
        });
      }
    },
    closeVisiblePI() {
      this.radioPI = null;
      this.VisiblePI = false;
    },
    toggleLeftPanel() {
      this.isShow = !this.isShow;
      microApp
        .getGlobalData("PUBLIC_METHODS")
        .changeWidth(this.isShow, "right", 390);
    },
    // 线上检查查询
    lineMoreCheck() {
      this.getLine();
      console.log(this.linequery);
    },
    // 重置
    lineMoreRest() {
      this.linequery = {};
      this.getLine();
    },
    checkMoreCheck() {
      this.getCheck();
    },
    // 重置
    checkMoreRest() {
      this.checkMore = {};
      this.getCheck();
    },
    // 线上检查查询
    VerifyMoreCheck() {
      this.getVerify();
    },
    // 重置
    VerifyMoreRest() {
      this.VerifyMore = {};
      this.getVerify();
    },
  },
};
</script>

<style scoped lang="scss">
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 390px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #132054;
  padding: 5px 0;
  transition: right 0.3s ease-in-out;
}
.right-box {
  background-color: #132054;
  color: white;
  /* padding-top: 10px; */
  border-radius: 10px;
  /* margin: auto; */
  margin: 8px auto;
  border: 2px solid #5592be;
  width: 375px;
  height: 98%;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  /* height: calc(100% - 40px); */
}
.right-box .big-tit {
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  height: 22px;
  padding-left: 10px;
  border-radius: 9px 8px 0 0;
  width: 100%;
  background-size: cover;

  line-height: 22.4px;
  letter-spacing: 0.03em;
  text-align: left;
  background-image: url("../assets/tit-bg.png");

  /* position: relative; */
}

.right-box .big-content {
  padding: 10px;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  width: 95%;
  height: 95%;
}
.tit-name {
  font-weight: bold;
  margin-left: 5px;
  background: linear-gradient(to right, #226dc4, #132054);
  font-size: 16px;
  line-height: 30px;
  padding: 0 10px;
  width: 300px;
  height: 30px;
}

.big-content .tit {
  height: 30px;
  display: flex;
}

.showButton {
  height: 60px;
  width: 40px;
  background: linear-gradient(
    90deg,
    rgba(130, 209, 246, 1) 0%,
    rgba(41, 182, 244, 1) 50%,
    rgba(0, 137, 205, 1) 99%
  );
  text-align: center;
  writing-mode: vertical-rl;
  line-height: 40px;
  position: absolute;
  left: -40px;
  top: 48%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px 0 0 5px;
}
.title {
  display: flex;
  justify-content: flex-start;
}
.component-container {
  width: 100%;
  height: calc((100% - 18px) / 2);
}
.component-alertInformation {
  height: calc((100% - 18px) / 2 * 0.9);
}
.component-alertTable {
  height: calc((100% - 18px) / 2 * 1.1);
}
::v-deep ::-webkit-scrollbar {
  /* display: block; */
}
::v-deep .table .el-table tr:nth-child(even) {
  background-color: #132054 !important;
  color: white;
}
::v-deep .table .el-table tr:nth-child(odd) {
  background-color: #1d3683 !important;
  color: white;
}
::v-deep .table .el-table {
  background-color: #1d3683 !important;
  // color: white;
}
::v-deep .table .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px; /*滚动条宽度*/
  height: 13px;
}
::v-deep .table .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
::v-deep .table .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background-color: transparent !important;
}
::v-deep .table .el-table__fixed-right tbody tr:hover > td {
  background-color: transparent !important;
}
/*定义滑块 内阴影+圆角*/
::v-deep .table ::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: #226dc4; /*滚动条的背景颜色*/
  width: 80px;
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .table ::-webkit-scrollbar-track {
  margin-top: 10px;
  // box-shadow: 0px 1px 3px #071e4a inset !important; /*滚动条的背景区域的内阴影*/
  // border-radius: 10px !important; /*滚动条的背景区域的圆角*/
  // background: #3f4e8a !important; /*滚动条的背景颜色*/
  background: #132054 !important;
}
::v-deep .table .el-table__fixed-right-patch {
  background-color: #132054;
}
::v-deep .table .el-table .el-table__cell {
  // line-height: 25px !important;
  padding: 0px 0 !important;
}
::v-deep .table .el-table td.el-table__cell {
  border-bottom: 0px solid white !important;
}
::v-deep .table .el-table th.el-table__cell.is-leaf {
  border-bottom: 0px solid white !important;
}
::v-deep .table .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 0px solid white !important;
}
::v-deep .table .el-table::before {
  background-color: #132054 !important;
}
::v-deep .table .el-table__fixed::before {
  background-color: #132054 !important;
}
::v-deep .table .el-table__fixed-right-patch {
  border-bottom: 0px solid white !important;
}
::v-deep .table {
  .el-table--scrollable-y .el-table__body-wrapper {
    // overflow-y: hidden;
    background-color: #132054 !important ;
  }
}
::v-deep .table .el-table__fixed-right::before {
  background-color: #132054 !important;
}
::v-deep .table .el-table__fixed-right {
  // background-color: #132054 !important;
  height: 144px !important;
  right: 0px !important;
}
::v-deep .table .el-table__fixed {
  // background-color: #132054 !important;
  height: 144px !important;
}
::v-deep .line .el-dialog {
  height: 500px !important;
  overflow-y: scroll;
}

::v-deep .line .el-dialog__body {
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
::v-deep .el-form-item {
  margin-bottom: 12px !important;
}
::v-deep .el-form-item__label {
  text-align: left;
}
::v-deep .el-textarea__inner {
  width: 100% !important;
}
::v-deep .lineMore .el-form-item__label {
  min-width: 82px !important;
}
::v-deep .lineMore .el-form-item {
  display: flex;
  align-items: center;
}
::v-deep .lineMore .el-form-item__content {
  margin-left: 2px !important;
}
::v-deep .check .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px; /*滚动条宽度*/
  height: 10px;
}
/*定义滑块 内阴影+圆角*/
::v-deep .check .el-table__body-wrapper::-webkit-scrollbar-thumb {
  // box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的内阴影*/
  border-radius: 10px; /*滚动条的圆角*/
  background-color: #939392; /*滚动条的背景颜色*/
  width: 80px;
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .check .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px #071e4a inset; /*滚动条的背景区域的内阴影*/
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #f0f2f5; /*滚动条的背景颜色*/
}
::v-deep .check .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: hidden;
}
::v-deep .last .table .el-table__fixed {
  height: 143px !important;
  right: 0px !important;
}
::v-deep .line .el-dialog__header {
  position: sticky;
  top: 0px;
  background-color: white;
  // padding: 20px 20px 10px;
  z-index: 2000;
}
::v-deep .table .el-table {
  .el-table__fixed-right {
    height: auto !important;
    bottom: 13px !important;
  }
}
::v-deep .table ::-webkit-scrollbar-corner {
  background-color: var(--bgBlockStyle) !important;
}
::v-deep .table .el-table__fixed-right .el-table__body {
  padding-bottom: 12px !important;
}
.btnStyle {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 16px;
  color: #fff;
  margin-right: 10px;
}
.btnActive {
  background: linear-gradient(
    90deg,
    rgba(130, 209, 246, 1) 0%,
    rgba(41, 182, 244, 1) 50%,
    rgba(0, 137, 205, 1) 99%
  );
  border-radius: 5px;
  color: #fff;
  padding: 3px;
  margin-right: 10px;
}
.sum_content {
  display: flex;

  align-items: center;
  /* margin-top: 5px; */
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(60, 149, 255, 0.15) 0%,
    rgba(60, 149, 255, 0.0345) 100%
  );
  width: 327px;
  height: 87%;
}
</style>
